<template>
  <div id="app">
    <!-- 测试组件库 -->
    <!-- <ql-test></ql-test> -->
    <ql-jz-table
      :tableHeader="tableHeader"
      :tableBody="tableBody"
      :tableConfig="tableConfig"
      @handleSelectionChange="handleSelectionChange"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
      @handleColumnDropEnd="handleColumnDropEnd"
      @handleRowDropEnd="handleRowDropEnd"
    >
      <!-- 普通列个性化内容 -->
      <template v-slot:tableitem="{ data }">
        <!-- 仅支持数据展示，不支持修改的修改 ps:tip查了一下好像不能修改作用域传过来的对象 -->
        <el-input
          v-model="data.address"
          size="mini"
          v-if="data.type == 'slot' && data.prop == 'address'"
        ></el-input>
      </template>
      <!-- 使用具名插槽(插入特定位置) + 作用域插槽(获取值)  轻松自定义内容和数据 -->
      <template v-slot:opt="{ row }">
        <el-button size="mini" @click="getRow(row)">转诊</el-button>
        <el-button size="mini" @click="getRow2(row)">停诊</el-button>
        <el-button size="mini" @click="getRow3(row)">结束就诊</el-button>
        <el-button size="mini" @click="getRow4(row)">出科</el-button>
      </template>
    </ql-jz-table>
    <ql-jz-form-search
      layout="normal"
      ref="formSearch"
      formSize="mini"
      :paramsList="paramsList"
    >
      <template v-slot:opt>
        <el-button @click="handleSearch" size="mini">查询</el-button>
        <el-button @click="handleExport" size="mini">导出</el-button>
        <el-button @click="handleImport" size="mini">导入</el-button>
      </template>
    </ql-jz-form-search>
  </div>
</template>

<script>
import { tableHeader } from "./testFile/tableHeader";
import { tableBody } from "./testFile/tableBody";
import { tableConfig } from "./testFile/tableConfig";
export default {
  name: "App",
  data() {
    return {
      tableHeader,
      tableBody,
      tableConfig,
      paramsList: [
        {
          type: "input",
          label: "姓名",
          placeholder: "请输入姓名",
          prop: "name",
          defaultVal: "",
        },
        {
          type: "select",
          label: "地点",
          placeholder: "请选择地点",
          prop: "address",
          defaultVal: [],
          dataList: [
            {
              label: "上海",
              value: "shanghai",
            },
            {
              label: "北京",
              value: "beijing",
            },
          ],
        },
        {
          type: "checkbox",
          label: "爱好",
          placeholder: "请选择地点",
          prop: "hoby",
          defaultVal: [],
          dataList: [
            {
              label: "篮球",
              value: "basketball",
            },
            {
              label: "足球",
              value: "football",
            },
          ],
        },
        {
          type: "switch",
          label: "开关",
          placeholder: "请选择地点",
          prop: "switch",
          defaultVal: false,
        },
        {
          type: "datetimerange",
          label: "日期",
          placeholder: "请选择日期",
          prop: "date",
          defaultVal: [],
        },
        {
          type: "daterange",
          label: "时间",
          placeholder: "请选择时间",
          prop: "date2",
          defaultVal: [],
        },
      ],
    };
  },
  methods: {
    // ----- formSearch 查询、导出、导入等事件 start -----
    // 目前暂时只能通过 this.$refs.formSearch.form 获取表头参数【待优化】
    handleSearch() {
      console.log(this.$refs.formSearch.form, "==== search btn ====");
    },
    handleExport(data) {
      console.log(data, "==== 导出按钮点击事件 ====");
    },
    handleImport(data) {
      console.log(data, "==== 导入按钮点击事件 ====");
    },
    // ----- formSearch 查询、导出、导入等事件 end  -----

    // ----- 操作列多个事件展示 start -----
    getRow(row) {
      console.log(row, "==== 选中的row数据 ====");
    },
    getRow2(row) {
      console.log(row, "==== 选中的row数据 ====");
    },
    getRow3(row) {
      console.log(row, "==== 选中的row数据 ====");
    },
    getRow4(row) {
      console.log(row, "==== 选中的row数据 ====");
    },
    // ----- 操作列多个事件展示 end -----

    // ----- 行和列拖拽相关事件 start -----
    handleColumnDropEnd(colList) {
      console.log(colList, "=== 列拖拽结束后返回的列数据 ===");
    },
    handleRowDropEnd(rowList) {
      console.log(rowList, "=== 行拖拽结束后返回的列数据 ===");
    },
    // ----- 行和列拖拽相关事件 end -----

    handleSelectionChange(val) {
      console.log(val, "==== selection选中的数据 ====");
    },
    handleSizeChange(size) {
      console.log(size, "==== 分页数量改变事件 ====");
    },
    handleCurrentChange(curPage) {
      console.log(curPage, "==== 分页数量改变事件 ====");
    },
  },
};
</script>

<style></style>
